@charset "UTF-8";
@import "setting";
@import "animate";
@import "reset";
@import "swiper";
//cover_position
.nocontent {
  font-size: 1.3rem;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  background: transparent !important;
  img {
    position: absolute;
    bottom: 50%;
    margin: 0 0 -12.5%;
    left: 20%;
    width: 60%;
    &.trumpet {
      margin: 0;
      bottom: 45%;
      width: 30%;
      left: 35%;
    }
    &.minimize {
      width: 10%;
      left: 45%;
      bottom: 40%;
    }
  }
  .text {
    display: block;
    color: @color_g;
    position: absolute;
    top: 60%;
    left: 0;
    text-align: center;
    padding: @space*4 0 0;
    width: 100%;
    &.minimize {
      top: 65%;
    }
  }
  .goto_login {
    display: block;
    margin: @space*4;
    text-align: center;
    a {
      color: @color_skin;
      display: block;
      height: 4rem;
      line-height: 4rem;
      font-size: 1.3rem;
      margin: 0 25%;
      background: lighten(@color_skin, 35%);
      padding: 0 @space;
      .radius_a(2rem);
    }
  }
  &.por {
    position: relative;
    height: 37.5rem !important;;
    padding: @space*3 0 !important;
    text-align: center !important;
    border: 0 !important;
  }
  &.minisize {
    height: 12rem !important;
    padding: 0 !important;
    text-align: center !important;
    border: 0 !important;
    img {
      width: 8rem;
      left: 50%;
      top: 1rem;
      margin: 0 0 0 -4rem;
    }
    .text {
      top: 5rem;
    }
  }
}

#app_page_btn {
  font-size: 1.3rem;
  position: absolute;
  bottom: @space*4;
  right: @space*4;
  .block(4rem);
  .radius_a(50%);
  background: @color_skin;
  border: @space solid lighten(@color_skin, 15%);
  box-shadow: 0 0 @space @space lighten(@color_skin, 30%);
  color: @color_w;
  text-align: center;
  line-height: 4.1rem;
  z-index: 5;
  opacity: 0.75;
  display: none;
}

#gotohome {
  display: block;
  border: @space/2 solid lighten(@color_skin, 15%);
  position: absolute;
  bottom: 6%;
  left: 40%;
  background: @color_skin url(./img/ok-128.png) center no-repeat;
  background-size: auto 65%;
  .radius_a(@space*2);
  margin: 0 0 -@space/2 -@space/2;
  text-align: center;
  width: 20%;
  height: 4rem;
  z-index: 3;
}

#gotohome_bg {
  &::before, &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 153, 255, 0)), to(rgba(0, 153, 255, 0.25)));
    height: 6rem;
    z-index: 2;
  }
  &::before {
    display: none;
    top: 0;
    .transform(180deg);
  }
  &::after {
    bottom: 0;
  }
}

#close_cover_position, #get_cover_position {
  position: absolute;
  display: block;
  text-align: center;
}

#close_cover_position {
  font-size: 1.2rem;
  color: @color_w;
  right: @space*3;
  top: 5%;
  padding: 0 @space;
  border: @border_w;
  .radius_a;
}

#get_cover_position {
  font-size: 1.4rem;
  color: @color_w;
  background: @color_skin;
  bottom: 8%;
  left: 50%;
  margin: 0 0 0 -4em;
  width: 8em;
  height: 3em;
  line-height: 3em;
  .radius_a;
}

#home_swiper {
  margin: 0 0 @space;
  position: relative;
}

#home_swiper, #classroom_swiper {
  img{
    width: 100%;
  }
  img.rem16 {
    max-height: 16rem;
  }
  img.rem18 {
    max-height: 18rem;
  }
}

.app_box {
  background: @color_w;
  margin: 0 0 @space*2;
  .skin_txt {
    color: @color_skin !important;
    padding: 0 @space/2;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .box_tit, .box_cont {
    position: relative;
  }
  .box_tit {
    overflow: hidden;
    border-bottom: @border_h;
  }
  .name {
    font-size: 1.4rem;
    display: block;
    height: 4rem;
    line-height: 4.2rem;
    padding: 0 0 0 @space*4;
    color: @color_skin;
    &.h {
      font-size: 1.3rem;
      color: @color_g;
      &::before {
        background-color: @color_g;
      }
    }
    &::before {
      content: '';
      position: absolute;
      width: @space/2;
      height: .6em;
      top: 50%;
      left: @space*2;
      background-color: @color_skin;
      margin: -.3em 0 0;
      .radius_a(@space/4);
    }
  }
  .more {
    color: @color_g;
    font-size: 1.2rem;
    height: 4rem;
    line-height: 4.2rem;
    position: absolute;
    top: 0;
    right: @space*2;
  }
  .icon_in {
    padding: 0 @space*2 0 @space;
    background: url(./img/common/enterin.png) right center no-repeat;
    background-size: auto 25%;
  }
  .box_cont {
    &.padding_box {
      margin: 0 @space*2;
    }
    &.content_box {
      padding: @space*2 @space*3;
      position: relative;
    }
  }
  &.transparent {
    background: transparent;
  }
}

//列表性内容通用类
.list_item {
  li {
    position: relative;
    overflow: hidden;
    background: @color_w;
  }
  span {
    font-size: 1.3rem;
    color: @color_g;
    display: block;
    line-height: 1.8rem;
    overflow: hidden;
  }
  img.pic {
    position: absolute;
    .radius_a;
  }
  &.line_list {
    li {
      height: 9rem;
      padding: 1rem 1rem 0 9+@space*2;
      border-bottom: @border_h;
      &:last-child {
        border: 0;
      }
    }
    img.pic {
      top: 1rem;
      left: 0;
      width: 9rem;
      height: 7rem;
    }
    .title, .comname {
      color: @color_n;
      font-size: 1.4rem;
      height: 3.5rem;
      padding: .5rem 0 0;
      margin: 0 0 1rem;
    }
    .intro {
      height: 2rem;
      line-height: 2rem;
    }
    .intention {
      height: 3rem;
      line-height: 3rem;
    }
    .collect {
      display: block;
      font-size: 1.2rem;
      font-weight: normal;
      float: right;
      color: @color_skin;
      border: @border_skin;
      position: absolute;
      padding: 0 @space 0 @space*4;
      right: @space;
      bottom: @space*2;
      line-height: 2.1rem;
      height: 2rem;
      overflow: hidden;
      .radius_a(1rem);
      &::before {
        content: '';
        text-align: center;
        .block(1.8rem);
        line-height: 1rem;
        position: absolute;
        top: 0;
        left: @space/2;
        background: url("./img/collect1.png") center no-repeat;
        background-size: 75% auto;
      }
      &.active {
        color: @color_w;
        background: @color_skin;
        &::before {
          background: url("./img/collect_sel1.png") center no-repeat;
          background-size: 75% auto;
        }
      }
    }
    .tag {
      display: inline-block;
      font-style: normal;
      line-height: 1.6rem;
      margin: @space 0 0 0;
      .radius_a;
      padding: .1rem @space;
      font-size: 1rem;
      &.tag_skin {
        color: @color_w;
        background: @color_skin;
      }
    }
    &.biger {
      li {
        height: 12.5rem;
        padding: 1rem 1rem 0 13.5+@space*2;
      }
      img.pic {
        width: 13.5rem;
        height: 10.5rem;
      }
      .title {
        margin: 0 0 2rem;
      }
    }
  }
  &.col2_list {
    margin: 0 0 0 @space*2;
    padding: @space*2 0 0;
    li {
      width: 50%;
      height: 18rem;
      padding: 0 @space*2 0 0;
      margin: 0 0 @space*2;
      float: left;
      &::after {
        .ablock;
        width: 100%;
        height: 8rem;
        left: -@space*2;
        bottom: -.5rem;
        background-color: @color_w;
        z-index: 2;
      }
    }
    img.pic {
      position: relative;
      width: 100%;
      z-index: 1;
    }
    span {
      position: absolute;
      z-index: 3;
      padding: 0 @space*2 0 0;
    }
    .title {
      color: @color_n;
      font-size: 1.4rem;
      line-height: 2.3rem;
      height: 4.6rem;
      bottom: 2.3rem;
    }
    .comname {
      color: @color_n;
      height: 2.3rem;
      line-height: 2.3rem;
      bottom: 4.6rem;
    }
    .intention {
      height: 2.3rem;
      line-height: 2.3rem;
      bottom: 2.3rem;
    }
    .intro {
      color: @color_gn;
      font-size: 1.2rem;
      bottom: 0;
      height: 2.3rem;
      line-height: 2.3rem;
    }
    .viewnum {
      color: @color_gn;
      font-size: 1.2rem;
      bottom: 0;
      height: 2.3rem;
      line-height: 2.3rem;
      &::after {
        content: '人观看';
      }
    }
  }
}

//艺考圈列表类
.sociality_list {
  @paddingTop: 6rem;
  @paddingBottom: 4rem;
  @thisTop: @space*2;
  @thisBottom: @space*2;
  @thisLeft: @space*3;
  @thisRight: @space*3;
  @photoSize: -@space*3+@paddingTop;
  li {
    margin: 0 @space @space;
    .radius_a(@space/2);
    .boxshow;
    position: relative;
    padding: @paddingTop 0 @paddingBottom;
    &.nocontent {
      box-shadow: 0 0 0 @color_bg;
    }
    &:last-child {
      border-bottom: 0;
    }
    .sociality_pic, .sociality_zan, .sociality_comment, .sociality_username, .sociality_date {
      position: absolute;
      display: block;
    }
    .sociality_pic {
      .block(@photoSize);
      border: @border_h;
      top: @thisTop;
      left: @thisLeft;
      margin: -1px 0 0;
      .radius_a(50%);
    }
    .sociality_username {
      color: @color_n;
      font-size: 1.4rem;
      line-height: 2rem;
      top: @thisTop+@space;
      left: @thisLeft*2+@photoSize;
      &.jigou:after {
        content: '机构';
        display: inline-block;
        background: @color_skin;
        .radius_a(@space);
        color: @color_w;
        font-size: 1rem;
        padding: 0 @space/2;
        line-height: 1.2rem;
      }
    }
    .sociality_date {
      font-size: 1.1rem;
      top: 2+@thisTop+@space;
      left: @thisLeft*2+@photoSize;
    }
    .sociality_zan, .sociality_comment {
      bottom: @thisBottom;
      line-height: 3rem;
      padding: 0 0 0 3rem;
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 3rem auto;
      &.active {
        color: @color_skin;
        background-position: left bottom;
      }
    }
    .sociality_zan {
      background-image: url(./img/common/zan.png);
      left: @thisLeft;
    }
    .sociality_comment {
      background-image: url(./img/common/comment.png);
      right: @thisRight;
    }
    .sociality_cont {
      font-size: 1.4rem;
      padding: @space*2 @space*3 0;
      margin: @space 0 0;
      border-top: @border_h;
    }
    & .sociality_cont:only-child {
      border-bottom: @border_h;
    }
    .sociality_imgs {
      width: 80%;
      padding: @space*2 0 1px @space*3;
      .radius_a(@space);
      img {
        display: block;
        .radius_a;
        width: 10rem;
        float: left;
        margin: 0 @space*2 @space*2 0;
        border: @border_h;
      }
      & img:only-child {
        max-width: 27rem;
        max-height: 27rem;
        float: none;
      }
    }
  }
}

//classroom styles
.app_col_nav {
  @thisHeight: 4.1rem;
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
  border-bottom: @border_h;
  background: @color_w;
  &, .app_col_inner_nav {
    height: @thisHeight;
    line-height: @thisHeight;
    text-align: center;
  }
  .app_col_inner_nav {
    visibility: hidden;
    .menuflex;
    &.loaded {
      visibility: visible;
    }
    a {
      color: @color_g;
      font-size: 1.3rem;
      padding: 0 @space*3;
      position: relative;
      .nowrap;
      .menuflex_col;
      height: @thisHeight;
      line-height: @thisHeight;
      &.active {
        color: @color_skin;
        &::after {
          .ablock;
          bottom: 0;
          left: 50%;
          height: @space/2;
          background: @color_skin;
          width: 3em;
          margin: 0 0 0 -1.5em;
        }
      }
    }
  }
}

.app_main.login_bg {
  background: url(./img/header.jpg) top center no-repeat;
  background-size: 100% auto;
  .step_1 .nocontent img {
    background: @color_skin;
    padding: @space*2;
    margin: 0 0 0 -@space*2;
    .radius_a(50%);
  }
}

.login_form {
  position: relative;
  padding: 13rem 15% @space*2;
  .phone, .code {
    position: relative;
    display: block;
    margin: 0 0 @space*2;
    padding: @space @space*2 @space @space*8;
    .radius_a(@space*4);
    border: @border_h;
    background-color: @color_w;
    input {
      font-size: 1.4rem;
      height: 3rem;
      width: 100%;
    }
    &:before {
      .ablock;
      .block(3rem);
      top: 50%;
      left: @space*2;
      margin: -1.5rem 0 0;
      background: center no-repeat;
      background-size: 100% auto;
    }
  }
  .phone:before {
    background-image: url(./img/phone.gif);
  }
  .code {
    &:before {
      background-image: url(./img/code.gif);
    }
    .get_code {
      position: absolute;
      top: @space;
      right: @space;
      .radius_a(@space*4);
      font-size: 1.2rem;
      width: 7em;
      height: 3rem;
      line-height: 3rem;
      color: @color_gn;
      background: @color_h;
      text-align: center;
      &.active {
        color: @color_w;
        background: @color_skin;
      }
    }
  }
  .submit {
    margin: @space*6 0 0;
    .radius_a(@space*4);
    color: @color_gn;
    background: @color_h;
    &.active {
      color: @color_w;
      background: @color_skin;
    }
  }
  .login_intro {
    font-size: 1.2rem;
    color: @color_gn;
    text-align: center;
    padding: @space*3 0 0;
  }
}

.user_integral_change {
  text-align: center;
  .userpage_title {
    padding: @space*3;
    font-size: 1.6rem;
    .intro {
      color: @color_g;
      font-size: 1.4rem;
    }
  }
  .userpage_cont {
    text-align: center;
    height: 36rem;
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    margin: -18rem 0 0;
    .img_sel_top, .img_sel_bottom {
      margin: @space*3 auto;
      img {
        .block(12rem);
        margin: 0 auto @space;
        .radius_a(50%);
      }
      .name {
        display: block;
        height: 3rem;
        line-height: 3rem;
      }
    }
    .img_sel_top {
    }
    .img_sel_bottom {
    }
  }
}

.app_formlist {
  @miniHeight: 4rem;
  @picHeight: 5rem;
  @qualificationsHeight: 10rem;
  padding: @space 0 @space*4;
  li {
    min-height: @miniHeight;
    background: @color_w;
    position: relative;
    border-bottom: @border_h;
    padding: 0 @space*2 0 7em;
    &.space {
      min-height: @space;
      background: transparent;
    }
    &.noborder {
      border: 0;
    }
    &.nopadding {
      padding: @space*2;
    }
    &.in {
      padding-right: @space*5;
      &::after {
        top: 50%;
        right: 0;
        margin: -@miniHeight/4 0 0;
        .ablock;
        .block(@miniHeight/2);
        background: url(./img/common/enterin.png) center no-repeat;
        background-size: auto 60%;
      }
    }
    &.app_formlist_avatar, &.app_formlist_cover {
      height: @picHeight;
      padding: @space;
      .val img {
        float: right;
        .block(-@space*2+@picHeight);
        display: block;
        .radius_a(50%);
      }
    }
    &.app_formlist_cover .val img {
      width: @picHeight/0.75;
      .radius_a;
    }
  }
  .name {
    font-size: 1.4rem;
    position: absolute;
    height: @miniHeight;
    line-height: @miniHeight;
    display: block;
    width: 6em;
    overflow: hidden;
    top: 50%;
    margin: -@miniHeight/2 0 0;
    left: @space*2;
  }
  .val {
    text-align: right;
    font-size: 1.3rem;
    display: block;
    width: 100%;
    min-height: @miniHeight;
    &.qualifications img {
      float: left;
      .block(@qualificationsHeight);
      margin: 0 @space*2 @space*2 0;
      .radius_a;
    }
  }
  .intro {
    line-height: @miniHeight;
    color: @color_gn;
  }
  .checks_cont {
    padding: @space @space*4 @space*3;
    a {
      color: @color_g;
      .radius_a;
      display: inline-block;
      line-height: 2.6rem;
      border: @border_h;
      background: @color_bg;
      padding: @space/2 @space*2;
      margin: 0 @space @space 0;
      &.active {
        color: @color_skin;
        background: lighten(@color_skin, 45%);
        border: @border_skin;
      }
    }
  }
  input {
    width: 99%;
    min-height: @miniHeight;
    text-align: right;
  }
  textarea {
    width: 99%;
    height: 8rem;
    max-height: 8rem;
    max-width: 99%;
  }
}

.app_collist {
  @listHeight: 4rem;
  &.icon_list {
    li {
      padding: 0 @space*2 0 @listHeight;
      overflow: hidden;
    }
    .jifen {
      background: url(../../lib/img/jifen.gif) center no-repeat;
    }
    .dingdan {
      background: url(../../lib/img/dingdan.gif) center no-repeat;
    }
    .xinde {
      background: url(../../lib/img/xinde.gif) center no-repeat;
    }
    .soucang {
      background: url(../../lib/img/soucang.gif) center no-repeat;
    }
    .xiaoxi {
      background: url(../../lib/img/xiaoxin.gif) center no-repeat;
    }
    .xuesheng {
      background: url(../../lib/img/xuesheng.gif) center no-repeat;
    }
    .icon {
      display: block;
      position: absolute;
      .block(@listHeight);
      top: 0;
      left: 0;
      background-size: 60% auto;
      .radius_a(50%);
    }
  }
  &.text_list {
    li {
      padding: 0 0 0 @space*2;
      overflow: hidden;
    }
  }
  li {
    background: @color_w;
    border-bottom: @border_h;
    height: @listHeight;
    line-height: @listHeight;
    position: relative;
    i {
      font-style: normal;
      position: absolute;
      top: 0;
      right: @space*3;
      display: block;
      height: @listHeight;
      line-height: @listHeight;
      padding: 0 @space;
    }
    .text {
      color: @color_g;
    }
    .val {
      color: @color_skin;
    }
    &.space {
      height: @space;
      background: transparent;
    }
    &.in::after {
      top: 50%;
      right: 0;
      margin: -@listHeight/4 0 0;
      .ablock;
      .block(@listHeight/2);
      background: url(./img/common/enterin.png) center no-repeat;
      background-size: auto 60%;
    }
  }
}

.user_center_list {
}

.topbg {
  background: @color_skin url(../../lib/img/user-_center_bg.png) center no-repeat;
  background-size: auto 100%;
  height: 19rem;
  text-align: center;
  position: relative;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    .block(8rem);
    margin: -4rem 0 0 -4rem;
    .radius_a(50%);
  }
  .name, .intro {
    color: @color_w;
    position: absolute;
    display: block;
    width: 100%;
    top: 50%;
    left: 0;
    margin: 5rem 0 0;
    text-align: center;
  }
  &.mechanism {
    img {
      margin-top: -6rem;
    }
    .name {
      margin: 3rem 0 0;
    }
    .intro {
      margin: 5rem 0 0;
    }
  }
}

.targetschool_search_bar {
  padding: @space @space*2;
  background: @color_bg;
  border-bottom: @border_h;
  .inner_targetschool_search_bar {
    position: relative;
  }
  input {
    background: @color_w;
    border: @border_h;
    .radius_a(@space/2);
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-indent: 1em;
    z-index: 1;
  }
  .search_btn {
    line-height: 3rem;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    &::after {
      display: block;
      content: '';
      width: 2rem;
      height: 2rem;
      margin: .5rem .5rem 0 0;
      .radius_a(50%);
      text-align: center;
      background: @color_h url('./img/cancel-128.png') center no-repeat;
      background-size: 60% auto;
    }
  }
}

#targetschool_fix_menu {
  font-size: 1.3rem;
  width: 1.3*8+@space;
  position: absolute;
  top: 100%;
  right: @space*2;
  background: @color_w;
  border: @space/2 solid @color_n;
  margin: -@space 0 0;
  padding: @space 0;
  .radius_a(@space);
  .boxshow;
  a {
    color: @color_n;
    display: block;
    float: left;
    width: 50%;
    line-height: 2.3em;
    margin: 0;
    text-align: center;
  }
  z-index: 1+@z-main;
}

#targetschool_cont {
  background: @color_bg;
  .name {
    color: @color_g;
    display: block;
    font-size: 1.2rem;
    padding: 0 @space*3;
    background-color: lighten(@color_h, 10%);
  }
  .submenu {
    background: @color_w;
    color: @color_n;
    min-height: @space/2;
    li {
      font-size: 1.4rem;
      padding: @space*2 0 @space*2 @space*2;
      text-indent: 1em;
      line-height: 1.8rem;
      border-bottom: @border_h;
      .key {
        color: @color_skin;
        font-weight: bold;
      }
    }
  }
}

.order_list {
  li {
    background: @color_w;
    margin: 0 0 @space;
    border-bottom: @border_h;
  }
  .order_id {
    padding: @space @space*2;
    display: block;
    border-bottom: @border_h;
  }
  .order_col {
    display: block;
    position: relative;
    padding: @space*2 @space*2 0;
    &.in {
      padding: @space*2;
      &:after {
        .ablock;
        .block(1rem);
        background: url(./img/common/enterin.png) center no-repeat;
        background-size: 50%;
        top: 50%;
        right: @space;
        margin: -.5rem 0 0 0;
      }
    }
  }
  .order_cover {
    float: left;
    width: 4rem;
    height: 4rem;
    margin: 0 @space*2;
    .radius_a(50%);
  }
  .order_readmore {
    display: block;
    text-align: right;
    height: 4rem;
    line-height: 4rem;
    padding: 0 @space*2;
  }
  .clearfix {
    background: #fafafa;
  }
  .order_name, .order_time, .order_expense, .order_status {
    color: @color_g;
    float: left;
    display: block;
    padding: 0 0 @space*2;
  }
  .order_name {
    color: @color_n;
  }
  .order_name, .order_time {
    width: 60%;
  }
  .order_expense, .order_status {
    width: 40%;
    text-align: right;
  }
  .order_status.err {
    color: @color_err;
  }
  .order_status.ok {
    color: @color_skin;
  }
  .order_settlement {
    display: block;
    text-align: right;
  }
  .order_btns {
    padding: @space*2;
    text-align: right;
    &。space {
      padding: @space 0 0;
    }
    a {
      display: inline-block;
      padding: @space @space*3;
      .radius_a;
    }
  }
  .order_close {
    color: @color_g;
    background: @color_h;
  }
  .order_pay {
    color: @color_w;
    background: @color_skin;
  }
}

.order_view {
  li {
    font-size: 1.3rem;
    line-height: 2rem;
    min-height: 2+@space*4;
    padding: @space*2 0 @space*2 @space*5+6rem;
    position: relative;
    border-bottom: @border_h;
    background: @color_w;
    &.order_btns {
      padding: @space*2;
      text-align: right;
      background: transparent;
      a {
        display: inline-block;
        padding: @space @space*3;
        .radius_a;
      }
      .order_close {
        color: @color_g;
        background: @color_h;
      }
      .order_pay {
        color: @color_w;
        background: @color_skin;
      }
    }
    &.col {
      padding: 0 @space*2 0 5rem+@space*6;
      min-height: 6rem+@space*4;
    }
    &.space {
      background: transparent;
      height: @space;
      min-height: @space;
      padding: 0;
    }
    img.order_cover {
      position: absolute;
      top: 50%;
      left: @space*4;
      .block(5rem);
      margin: -2.5rem 0 0 0;
      .radius_a(50%);
    }
    span.name {
      color: @color_skin;
      padding: @space*2 0;
      font-size: 1.2rem;
      position: absolute;
      top: 0;
      left: @space*2;
    }
    span.key {
      display: block;
      position: absolute;
      padding: @space*2 0;
      top: 0;
      left: @space*4;
      width: 6rem;
    }
    span.val {
      display: block;
      &.err {
        color: @color_err;
      }
      &.ok {
        color: @color_skin;
      }
    }
    .tit {
      font-size: 1.4rem;
      display: block;
      line-height: 3rem;
      padding: 1.5rem 0 0;
      &.tit_c {
        line-height: 5rem;
      }
    }
    .intro {
      color: @color_g;
      display: block;
      line-height: 2rem;
    }
    .tel {
      color: @color_skin;
    }
  }
}

.user_xiaoxi {
  ul {
    padding: @space 0 0;
  }
  li {
    border-top: @border_h;
    position: relative;
    padding: @space*2 @space*3;
    line-height: 2rem;
    min-height: 2rem;
    background: @color_w;
    overflow: hidden;
    &.space {
      padding: 0;
      height: @space;
      min-height: @space;
      background: transparent;
    }
    .tit {
      font-size: 1.5rem;
      line-height: 3rem;
      display: block;
      border-bottom: @border_h;
      padding: 0 0 @space;
      margin: 0 0 @space;
    }
    &.mb {
      margin: 0 0 @space;
      border-bottom: @border_h;
    }
  }
  .readed {
    color: @color_h;
    a {
      opacity: .25;
    }
  }
  .checker {
    left: -1*(2+@space*4);
  }
  a {
    display: block;
    color: @color_skin;
  }
}

.editing .user_xiaoxi {
  li {
    padding-left: 2+@space*6;
    .checker {
      left: @space*2;
    }
  }
}

.checker {
  position: absolute;
  top: @space;
  left: @space*2;
  .transition(.35s, left);
  .block(2+@space*2);
  &.right {
    right: @space*2;
    left: auto;
  }
  &.checked {
    background-image: url(./img/common/checked.png);
  }
  background: url(./img/common/unchecked.png) center no-repeat;
  background-size: 60% auto;
}

.list_delete_line {
  padding: 0 @space*2;
  background: @color_w;
  position: relative;
  height: 2+@space*4;
  line-height: 2+@space*4;
  text-align: right;
  color: @color_skin;
  border-top: @border_h;
}

.app_main.soucang {
  img.pic {
    .transition(.5s, left height width);
  }
  .checker {
    top: @space*2;
  }
  &.editing {
    @bili: (13.5-4)/13.5;
    .list_item.line_list img.pic {
      left: 2+@space*4;
      width: @bili*(9-1.5rem);
      height: @bili*(7-1.5rem);
    }
    .list_item.line_list.biger img.pic {
      left: 2+@space*4;
      width: @bili*13.5rem;
      height: @bili*10.5rem;
    }
    .checker {
      left: 0;
    }
  }
}

.video_row {
  background-size: cover;
  min-height: 18.2rem;
  position: relative;
  z-index: 1;
  &::after {
    .ablock;
    background: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  &.active .play {
    margin: -4rem 0 0 -4rem;
  }
  .play {
    .transition(.5s, margin-top);
    display: block;
    .block(8rem);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6rem 0 0 -4rem;
    z-index: 3;
    background: url(./img/play.png) center no-repeat;
    background-size: auto 90%;
    .radius_a(50%);
  }
  .intro, a {
    display: block;
    color: @color_w;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 3rem 0 0;
    line-height: 2rem;
    z-index: 4;
  }
  a {
    color: @color_skin;
    margin: 5rem 0 0;
  }
}

.video_intro {
  .video_intro_author {
    position: relative;
    height: 6rem;
    padding: 0 0 0 6rem;
    line-height: 6rem;
    img {
      position: absolute;
      top: @space;
      left: 0;
      .block(5rem);
      .radius_a(50%);
    }
  }
  .video_intro_name {
    padding: 0 0 @space;
  }
  .video_intro_intro {
    color: @color_g;
    font-size: 1.2rem;
    padding: @space;
  }
}

.commentline {
  height: 4rem;
  overflow: hidden;
  background: @color_w;
  border-top: @border_h;
  position: relative;
  padding: 0 @space*18 0 @space*2;
  .myinput {
    padding: 0 @space;
    color: @color_g;
    height: 3rem;
    line-height: 3rem;
    background: @color_bg;
    margin: @space 0;
    .radius_a(@space);
  }
  .shoucang {
    position: absolute;
    top: @space;
    right: @space*2;
    width: @space*14;
    line-height: 3rem;
    border: @border_skin;
    color: @color_skin;
    text-align: center;
    .radius_a(@space);
    &.active {
      color: @color_w;
      background: @color_skin;
    }
  }
}

.video_menu_list {
  padding: @space*2 0;
  li {
    position: relative;
    margin: 0 @space*3 -1px @space*10;
    padding: @space*2 0 @space*2 0;
    border-bottom: @border_h;
    font-size: 1.4rem;
    z-index: 1;
    &::before, &::after {
      .ablock;
      background: @color_skin;
    }
    &::after {
      top: @space*3;
      left: -6*@space;
      margin: 0 0 0 @space*1.5;
      width: @space/2;
      height: 100%;
      z-index: 2;
    }
    &.active::before {
      border-color: lighten(@color_skin, 35%);
    }
    &::before {
      .block(@space*2);
      overflow: hidden;
      border: @space solid @color_w;
      .radius_a(50%);
      top: @space*2.5;
      left: -6*@space;
      z-index: 3;
    }
    &:last-child {
      border: 0;
      &::after {
        display: none;
      }
    }
    .timer {
      font-size: 1.2rem;
      display: block;
      color: @color_g;
    }
    .tag {
      line-height: 1.5rem;
      font-size: 1rem;
      .radius_a(@space*2);
      color: @color_skin;
    }
  }
}

.video_comment_item {
  background: @color_w;
  border-bottom: @border_h;
  font-size: 1.2rem;
  .avatar {
    position: relative;
    height: 6rem;
    padding: 0 0 0 7rem;
    color: @color_g;
    img {
      .block(5rem);
      .radius_a(50%);
      position: absolute;
      top: @space;
      left: @space*2;
    }
  }
  .name {
    font-size: 1.4rem;
    color: @color_n;
    padding: 1rem 0 0;
    height: 2rem;
    display: block;
  }
  .intro {
    padding: @space @space*3 @space*2;
  }
}

.mechanism_view_list {
  li {
    position: relative;
    padding: @space*1.5 @space*2 0 7rem;
    line-height: 2rem;
    .tit {
      position: absolute;
      top: @space*1.5;
      left: @space*5;
      width: 5rem;
      display: block;
    }
    .val {
      border-bottom: @border_h;
      display: block;
      padding: 0 @space*2 @space*1.5 0;
    }
    &:last-child .val {
      border-bottom: 0;
    }
  }
}

.mechanism_classlist {
  color: @color_g;
  li {
    padding: @space*2 @space*4;
    border-bottom: @border_h;
    position: relative;
    &.in::after {
      .ablock;
      .block(@space*4);
      background: url(./img/common/enterin.png) center no-repeat;
      background-size: auto 75%;
      margin: -@space*2 0 0;
      top: 50%;
      right: @space;
    }
  }
  .class_name {
    color: @color_n;
    font-size: 1.5rem;
    display: block;
  }
  .class_content {
    font-size: 1.3rem;
    display: block;
  }
  .class_cost {
    font-size: 1.4rem;
    b {
      color: @color_err;
    }
    margin: 0 @space 0 0;
  }
  .class_num {
    font-size: 1.2rem;
    line-height: 1.3rem;
    display: inline-block;
    padding: @space/2 @space/2 @space/4;
    .radius_a;
    color: @color_w;
    background: @color_skin;
  }
}

.jifen_views {
  padding: @space 0;
  margin: 0;
  li {
    padding: @space 0;
  }
}

.jifen_head {
  color: @color_skin;
  height: 11rem;
  line-height: 9.5rem;
  background: @color_skin url(./img/common/jifenbg.png) center no-repeat;
  background-size: cover;
  text-align: center;
  position: relative;
  span {
    font-size: 1.6rem;
    position: relative;
    display: block;
    height: 11rem;
    z-index: 3;
  }
  &::before {
    .ablock;
    font-size: 1.2rem;
    z-index: 2;
    content: '积分';
    line-height: 10rem;
    top: 50%;
    left: 50%;
    margin: -3.5rem 0 0 -3.5rem;
    .block(7rem);
    text-align: center;
    background: @color_w;
    color: @color_n;
    .radius_a(50%);
  }
  &::after {
    z-index: 1;
    .ablock;
    top: 50%;
    left: 50%;
    margin: -4rem 0 0 -4rem;
    .block(8rem);
    text-align: center;
    background: rgba(255, 255, 255, .5);
    color: @color_n;
    .radius_a(50%);
  }
}

.jifen_intro {
  color: @color_skin;
  font-size: 1.2rem;
  display: block;
  padding: @space 0;
  margin: 0 0 @space*2;
  text-align: center;
  background: @color_w;
}

.jifen_box {
  padding: @space/2;
  background: @color_w;
  margin: @space*2;
  border: @space/2 solid @color_skin;
  .radius_a;
  position: relative;
  .jifen_box_tit {
    font-size: 1.4rem;
    text-align: center;
    padding: @space*2;
    b {
      color: @color_skin;
    }
  }
  li {
    color: @color_g;
    font-size: 1.3rem;
    .block(4.5rem);
    line-height: 4.5rem;
    float: left;
    margin: .2rem;
    border: @border_h;
    text-align: center;
    background: @color_bg;
    .radius_a(@space/2);
    &.active {
      color: @color_skin;
      position: relative;
      &::after {
        .ablock;
        .block(@space*2);
        line-height: @space;
        background: @color_skin url(./img/ok-128.png) center no-repeat;
        background-size: 75% auto;
        top: 1px;
        right: 1px;
        .radius_a(@space/2);
      }
    }
    i {
      font-style: normal;
      font-size: 60%;
    }
  }
}

.jifen_list {
  padding: @space 0;
  li {
    position: relative;
    min-height: 5rem;
    line-height: 5rem;
    padding: 0 6rem 0 0;
    margin: @space/2 0;
  }
  .key, .jifen_num {
    display: block;
    width: 50%;
    float: left;
  }
  .jifen_num {
    width: 50%;
    text-indent: 2.5rem;
    background: url(./img/db.gif) left center no-repeat;
    background-size: auto 50%;
  }
  a.btn {
    display: block;
    width: 6rem;
    line-height: 3rem;
    margin: 1rem 0 0;
    background: @color_bg;
    color: @color_g;
    text-align: center;
    .radius_a(1.5rem);
    position: absolute;
    top: 0;
    right: 0;
    &.active {
      background: @color_skin;
      color: @color_w;
    }
  }
  .key {
    padding: 1rem 0 0;
    line-height: 2rem;
    &.vcenter {
      padding: 1.5rem 0 0;
    }
  }
  .info {
    color: @color_g;
    font-size: 1.2rem;
    line-height: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.replys {
  position: relative;
  padding: 0 0 @space;
  &::before {
    content: ' - 评论 - ';
    display: block;
    top: @space*2;
    left: 0;
    color: @color_g;
    padding: 0 @space*2 @space*2;
    text-align: center;
  }
  li {
    color: @color_g;
    font-size: 1.1rem;
    background: @color_w;
    .radius_a(@space*3);
    margin: 0 @space @space;
    padding: @space @space*2;
    border-top: @border_h;
  }
  .username, .reply_username {
    font-size: 1.3rem;
    padding: 0 @space/2;
    color: @color_skin;
  }
  .intro {
    color: @color_n;
    font-size: 1.3rem;
  }
  em {
    color: @color_g;
    font-size: 1.1rem;
    padding: 0 0 0 @space;
    font-style: normal;
  }
}

.xuesheng_list_tit, .xuesheng_list {
  span {
    display: block;
    float: left;
    text-align: left;
    text-indent: @space*2;
    overflow: hidden;
  }
  .xuesheng_name {
    width: 20%;
  }
  .xuesheng_tel {
    width: 40%;
  }
  .xuesheng_intro {
    width: 40%;
    a {
      line-height: 1.4rem;
      display: inline-block;
      margin: .3rem .25rem;
    }
  }
}

.xuesheng_list {
  li {
    min-height: 3.6rem;
    line-height: 3.6rem;
    border-top: @border_h;
    background: @color_w;
  }
}

.xuesheng_list_tit {
  color: @color_g;
  height: 2rem;
  line-height: 2.1rem;
  overflow: hidden;
  background: @color_bg;
  span {
    font-size: 1rem;
    line-height: 2rem;
  }
}

.view_xuesheng {
  li {
    font-size: 1.2rem;
    min-height: 3.6rem;
    line-height: 3.6rem;
    border-bottom: @border_h;
  }
  .tit {
    position: absolute;
    top: 0;
    left: 1em;
    color: @color_g;
  }
  .val {
    line-height: 2rem;
    padding: .8rem @space*2;
  }
  .col, .col_l, .col_r {
    position: relative;
    padding: 0 0 0 5em;
    display: block;
  }
  .col {
    width: 100%;
  }
  .col_l, .col_r {
    width: 50%;
    float: left;
  }
  .col_r::before {
    .ablock;
    width: 1px;
    height: 50%;
    top: 25%;
    left: 0;
    background: @color_h;
  }
}

.kecheng_list {
  li {
    font-size: 1.2rem;
    min-height: 3.6rem;
    line-height: 3.6rem;
    border-bottom: @border_h;
  }
  .col {
    padding: 0 0 0 3.6em;
    position: relative;
  }
  .tit {
    position: absolute;
    top: .8rem;
    left: 1.6rem;
    color: @color_g;
    .block(2rem);
    line-height: 2.1rem;
    overflow: hidden;
    font-size: 1rem;
    background: @color_h;
    text-align: center;
    margin: -1px;
    .radius_a(50%);
  }
  .val {
    line-height: 2rem;
    padding: .8rem @space*2 .8rem 0;
  }
}

#add_students {
  .num {
    display: block;
    font-size: 1.3rem;
    color: @color_n;
    padding: @space*2 0;
    text-align: center;
  }
  .add_user_phone {
    border: 2px solid @color_h;
    .radius_a(@space);
    text-align: center;
    margin: 0 @space*3;
    input {
      font-size: 1.6rem;
      height: 4rem;
      background: @color_w;
      width: 100%;
      text-align: center;
    }
  }
}

#tcourse_sels {
  border: @border_h;
  border-bottom: 0;
  li {
    border-bottom: @border_h;
    background: @color_w;
    padding: @space*2 @space*1.5 @space*2 5rem;
    line-height: 2rem;
    position: relative;
    &::before {
      .ablock;
      .block(2rem);
      line-height: 1.5rem;
      overflow: hidden;
      background: @color_h url(./img/ok-128.png) center no-repeat;
      background-size: auto 50%;
      top: 50%;
      left: 1.5rem;
      .radius_a(50%);
      margin: -1rem 0 0;
    }
    &.active::before {
      background-color: @color_skin;
    }
  }
}

#search_box {
  padding: @space*4 0;
  .search_box_content {
    padding: 0 0 @space;
    border-bottom: @border_h;
    background: @color_w;
    margin: 0 @space*2 @space*4;
    position: relative;
    .radius_a(@space*2);
    &.hot {
      a {
        display: block;
        float: left;
        padding: @space/2 @space*2;
        margin: 0 0 @space @space*2;
        background: @color_bg;
        color: @color_g;
        .radius_a(@space*3);
      }
      .key_word_list {
        padding: @space*2 @space @space*2 0;
      }
    }
    &.history {
      ul {
        li {
          padding: @space*2 0;
          position: relative;
          border-top: @border_h;
          a {
            color: @color_g;
            padding: 0 0 0 @space*3;
          }
          .close {
            position: absolute;
            height: 2.4rem;
            top: .6rem;
            right: @space*2;
            display: block;
            .block(2.4rem);
            background: @color_gn url('./img/cancel-128.png') center no-repeat;
            background-size: auto 50%;
            .radius_a(50%);
          }
        }
      }
    }
    .tit {
      display: block;
      padding: @space*2;
    }
    .clear {
      position: absolute;
      height: 2.4rem;
      line-height: 2.4rem;
      top: .6rem;
      right: @space*2;
      display: block;
      padding: 0 @space*2;
      .radius_a(@space);
      background: @color_gn;
      &::after {
        font-size: 1.1rem;
        color: @color_w;
        content: '清空历史';
      }
    }
  }
}

#share {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: @z-mask;
  .inner_shere {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    p {
      padding: 0 0 @space;
    }
    span {
      display: block;
      float: left;
      height: 15rem;
      width: 33.33%;
      background: @color_bg center no-repeat;
      background-size: auto 50%;
      &.wxfriend {
        background-image: url(./img/wxfriend.png);
      }
      &.wx {
        background-image: url(./img/wx.png);
      }
      &.wb {
        background-image: url(./img/wb.png);
      }
    }
  }
}

.app_col_content {
  height: 100%;
  padding-bottom: @app_head_height;
  position: relative;
}

.left_menu {
  float: left;
  width: 25%;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  z-index: -1+@z-head;
  border-right: @border_h;
  ul {
    background: @color_bg;
    padding: @space/2 0;
  }
  li {
    line-height: 1.4rem;
    padding: @space*2.4 @space;
    margin:0 0 0 @space;
    .nowrap;
    font-size: 1.4rem;
    text-align: center;
    .transition(.5s,background);
    &.active {
      background: @color_w;
      .radius_l(@space);
      .boxshow;
    }
  }
}

.right_content {
  float: right;
  width: 75%;
  height: 100%;
  position: relative;
  z-index: -2+@z-head;
  .spancol {
    width:96%;
    left:2%;
    .radius_b(@space);
    height: 4rem;
    background: @color_bg;
    position: absolute;
    z-index: -3+@z-head;
    .boxshow;
    span {
      color: @color_g;
      width: 50%;
      margin:.5rem 0 .5rem -1px;
      border-right: @border_w;
      float: left;
      line-height: 3rem;
      height: 3rem;
      text-align: center;
      &:last-child{
        border: 0;
      }
    }
    .submenu{
      display: none;
      position: absolute;
      top:3.75rem;
      left:0;
      width:100%;
      padding:@space;
      background: rgba(255,255,255,0.75);
      .radius_a(@space);
      z-index: -2+@z-head;
      max-height: 650%;
      overflow-y: scroll;
      .boxshow;
      a{
        display: block;
        padding:@space*1.5 0;
        text-align: center;
      }
    }
  }
}
.yuanxiaolist {
  position: relative;
  z-index: -4+@z-head;
  padding:4+@space/2 @space/2 @space/2 @space/2;
  overflow-y: scroll;
  height:100%;
  li {
    border-bottom: @border_h;
    position: relative;
    padding:0 @space 0 8rem;
    height: 6rem;
    line-height: 6rem;
    .nowrap;
    &:last-child {
      border: 0;
    }
    &.showmore{
      padding:0;
      text-align: center;
      background: @color_bg;
      line-height: 3em;
      height:auto;
    }
    img{
      .block(4rem);
      .radius_a(50%);
      position: absolute;
      top:50%;
      left:2rem;
      margin:-2rem 0 0 0;
    }
  }
}
.yuanxiao_head{
  background: @color_skin url(./img/common/yuanxiao_bg.png) center no-repeat;
  background-size: 100% 100%;
  height:10rem;
  position: relative;
  padding:1rem 0 1rem 12rem;
  img{
    position: absolute;
    top:1rem;
    left:2rem;
    .block(8rem);
    .radius_a(50%);
    background: @color_w;
  }
  color: @color_w;
  .name{
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  p.plan{
    font-size: 1.3rem;
    line-height: 1.8rem;
  }
  .link{
    width:6em;
    text-align: center;
    background: @color_skin;
    position: absolute;
    top:50%;
    margin:-1.5rem 0 0;
    right:@space*2;
    line-height: 3rem;
    .radius_a(1.5rem);
    opacity: .85;
  }
}
.document_index_list{
  padding:0 0 0 @space*2;
  li{
    box-sizing: border-box;
    color: @color_w;
    float: left;
    width:50%;
    font-size: 1.5rem;
    font-weight: bold;
    height:10rem;
    line-height:10-@space;
    text-align: center;
    border:transparent @space solid;
    border-width: @space*2 @space*2 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  img{
    display: block;
    width:100%;
    height:auto;
  }
}
.document_view_list{
  padding:@space 0 0;
  background: @color_w;
  li{
    position: relative;
    height:8rem;
    margin:@space;
    padding:0 0 0 10.3+@space*2;
    line-height: 8rem;
    border-bottom: @border_h;
  }
  img{
    height:7rem;
    width:10.3rem;
    .radius_a(@space);
    position: absolute;
    border: @border_h;
    top:0;
    left:0;
  }
  .name{
    display: block;
    line-height: 7rem;
  }
}
.document_view_list_loadmore{
  padding:0;
  text-align: center;
  background: @color_bg;
  line-height: 3em;
  height:auto;
  display: block;
}
#myphoto{
  position: fixed;
  top:@space*2;
  right:@space*2;
  z-index: @z-head+1;
  img{
    .block(4rem);
    .radius_a(50%);
    border: @space/2 solid @color_w;
  }
}